<template>
    <div class="success">
        <!-- 预约成功 -->
        <div class="top">
            <img class="image" src="../../../static/img/smile.png" alt="">
            <p class="tip" v-if="score">预约成功，+{{score}}积分</p>
            <p class="successTip">{{type==1?'您已成功购买：天士力大健康城参观门票':'您已成功预约：天士力大健康城参观门票(团体票)，请等待审核通过'}}</p>
            <div class="proceed" @click="type==1?$router.push('/personTicket'):$router.push('/teamTicket')">
                继续购买
            </div>
            <div class="myTicket" @click="ticketDetail">
                预约详情
            </div>
        </div>
        <div class="activRecs">
            <h3 class="title">
                <span>活动推荐</span>
            </h3>
            <div class="list">
                <div class="item" @click="goDetail(item.active_id)" v-for="(item, index) in activeList" :key="index">
                    <div class="image">
                        <img :src="item.default_img" alt="">
                    </div>
                    <p class="title">{{item.title}}</p>
                    <p class="money">¥ {{item.price}}元</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { ActiveIndex } from '../../http/active'
    export default {
        name: '',
        data() {
            return {
                activeList: [],
                type: 1,//1个人2团体
                torder_id: '',
                score: null
            }
        },
        mounted() {
            this.type = this.$route.query.type
            this.torder_id = this.$route.query.torder_id
            this.score = this.$route.query.score
            if(this.type==1) {
                document.title = '散客预约'
            }else {
                document.title = '团队预约'
            }
            this.getActiveIndex()
        },
        methods: {
            async getActiveIndex() {
                try {
                    const res = await ActiveIndex(1)
                    if(res.status == 1) {
                        this.activeList = res.data
                    }else {

                    }
                } catch (error) {
                    console.log(error)
                }
            },
            goDetail(active_id) {
                this.$router.push({
                    path: 'active/acDetail',
                    query: {
                        active_id: active_id
                    }
                })
            },
            ticketDetail() {
                if(this.type == 1) {
                    this.$router.push({
                        path: '/personDetail',
                        query: {
                            torder_id: this.torder_id
                        }
                    })
                }else {
                    this.$router.push({
                        path: '/teamDetail',
                        query: {
                            torder_id: this.torder_id
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../style/mixin.scss";
    .success{
        width: 100vw;
        min-height: 100vh;
        background: #EEEEEE;
        display: flex;
        flex-direction: column;
        .top{
            width: 100%;
            height: 814px;
            background: #ffffff;
            padding: 72px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 0 0 24px 24px;
            .image{
                width: 158px;
                height: 142px;
                margin-bottom: 35px;
            }
            .tip{
                font-size:32px;
                font-weight:500;
                color:rgba(241,127,42,1);
                text-align: center;
            }
            .successTip{
                font-size:32px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height:48px;
                margin-top: 81px;
            }
            .proceed{
                width:520px;
                height:84px;
                border:2px solid rgba(241,127,42,1);
                border-radius:42px;
                font-size:36px;
                font-weight:400;
                color:rgba(241,127,42,1);
                line-height:84px;
                text-align: center;
                margin-top: 95px;
            }
            .myTicket{
                width:520px;
                height:84px;
                border-radius:42px;
                background: rgba(241,127,42,1);
                font-size:36px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:84px;
                text-align: center;
                margin-top: 61px;
            }
        }
        .activRecs{
            width: 100%;
            background: #ffffff;
            border-radius: 24px 24px 0 0;
            margin-top: 24px;
            padding: 40px 24px;
            flex: 1;
            .title{
                font-size:32px;
                font-weight:500;
                color:rgba(225,0,40,1);
                text-align: center;
                span{
                    background: url('../../../static/img/zhuansghi1.png') no-repeat center center;
                    background-size: 100% 100%;
                    padding: 0 44px;
                }

            }
            .list{
                margin-top: 39px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .item{
                    width: 339px;

                    // float: left;
                    margin-right: 24px;
                    margin-bottom: 22px;
                    &:nth-of-type(2n) {
                        margin-right: 0;
                    }
                    .image{
                        width: 339px;
                        height: 191px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .title{
                        font-size:30px;
                        font-weight:500;
                        color:rgba(0,0,0,1);
                        line-height: 52px;
                        @include ellipsis(1);
                    }
                    .people{
                        font-size:28px;
                        font-weight:400;
                        color:rgba(50,50,50,1);
                        line-height: 52px;
                        .totla{
                            color: #757575;
                        }
                    }
                    .money{
                        font-size:30px;
                        font-weight:500;
                        color:rgba(225,0,40,1);
                        line-height: 52px;
                    }
                }
            }
        }
    }
</style>